<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;">
    <img src="wheel_wrap.png" style="width: 100%">
    <img src="564fff53N974e6518.png"  style="transition:all 2s;position: absolute;left: 50%;top:50%;
    margin-left: -43%;margin-top: -43%;width: 86%" id="zhuan">
    <img src="wheel_center.png" style="position: absolute;left: 50%;top: 50%;
    margin-left:-15% ;margin-top:-19%;width: 30%" id="zhen">
</div>
</body>
<script>
    var arr=[3600,3645,3690,3735,3780,3825,3870,3915,3645,3645,3645];
    zhen.onclick=function () {
        let deg=arr[Math.floor(Math.random()*arr.length)];
        zhuan.style.transform="rotate("+deg+"deg)";
    }
</script>
</html>